<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Web程序设计综合案例</title>
    <link rel="stylesheet" href="../../lib/element-plus.css">
    <link rel="stylesheet" href="../../css/common.css">
    <script src="../../lib/vue3.4.21.js"></script>
    <script src="../../lib/element-plus.js"></script>
    <script src="../../lib/element-plus-zh-cn.js"></script>
    <script src="../../lib/axios.min.js"></script>
    <script src="../../lib/http.js"></script>
    <script src="../../lib/curd.js"></script>
</head>
<body>
    <div id="app">
        <!--面包屑 高度30-->
        <el-breadcrumb class="breadcrumb">
            <el-breadcrumb-item v-for="item in breadcrumb"><el-button link>{{item}}</el-button></el-breadcrumb-item>
        </el-breadcrumb>
        <!--工具栏 高度50-->
        <div id="toolbar">
            <el-space>
                <el-space>
                    <el-input v-model="queryForm.roleName" placeholder="部门名称" clearable></el-input>
                </el-space>
                <el-space>
                    <el-button type="default" @click="query">查询</el-button>
                </el-space>
            </el-space>
        </div>
        <!--内容区 高度 100vh - 180 -->
        <div id="table">
            <el-table :data="tableData" border style="width: 100%">
                <el-table-column prop="id" label="ID" width="100" align="center"></el-table-column>
                <el-table-column prop="roleName" label="角色名称" width="150" align="center"></el-table-column>
                <el-table-column prop="status" label="状态" width="100" align="center">
                    <template #default="scope">
                        <el-tag type="success" v-if="scope.row.status==1">正常</el-tag>
                        <el-tag type="default" v-else>禁用</el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="remark" label="备注" width="150" align="center"></el-table-column>
                <el-table-column label="操作">
                    <template #default="scope">
                        <el-button size="small" type="primary" @click="edit(scope.row)" v-if="hasPermission('/api/role/edit')">编辑</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <!--分页 高度50-->
        <div id="pagination" >
            <el-pagination background layout="total, prev, pager, next" :total="pageInfo.total" @current-change="pageChanged" />
        </div>
        <el-dialog
            v-model="dialogVisible"
            :title="dialogTitle"
            width="500"
        >
            <el-form :model="formData" :rules="rules" ref="formRef" label-width="100px" style="max-width: 600px">
                <el-form-item label="角色名称" prop="roleName">
                    <el-input v-model="formData.roleName" readonly placeholder="角色名称" />
                </el-form-item>
                <el-form-item label="权限范围" prop="rules">
                    {{x}}
                    <el-tree 
                        ref="menuListTree" 
                        :data="menuList" 
                        :props="{ label: 'menuName', children: 'children' }" 
                        node-key="id" 
                        accordion 
                        show-checkbox
                        check-strictly
                        @check="handleCheck"
                    ></el-tree>
                    <el-button @click="x=ids">test</el-button>
                </el-form-item>
                <el-form-item label="状态" prop="status">
                    <el-radio-group v-model="formData.status">
                        <el-radio-button :value="1">正常</el-radio-button>
                        <el-radio-button :value="2">禁用</el-radio-button>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="备注" prop="remark">
                    <el-input type="textarea" :rows="5" v-model="formData.remark" placeholder="备注" />
                </el-form-item>
            </el-form>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="dialogVisible = false">取消</el-button>
                    <el-button type="primary" @click="save">保存</el-button>
                </div>
            </template>
        </el-dialog>
    </div>
    <script>
        const {createApp} = Vue;
        const app = createApp({
            data(){
                return {
                    breadcrumb:['系统管理','角色管理'],
                    queryForm:{
                        roleName:''
                    },
                    pageInfo:{
                        total: 0,
                        page: 1,
                        limit: 10
                    },
                    formData:{
                        id: 0,
                        roleName: '',
                        remark: '',
                        rules: '',
                        status: 1
                    },
                    tableData: [],
                    dialogTitle: '',
                    dialogVisible: false,
                    rules: {
                        roleName: [
                            { required: true, message: '请输入角色名称', trigger: 'blur' }
                        ]
                    },
                    menuList:[],
                    formRef: null,
                    menuListTree: null, x:''
                }
            },
            computed:{
                ids(){
                    return this.$refs.menuListTree.getCheckedKeys();
                },
            },
            methods:{
                edit(row){
                    this.dialogTitle   = '编辑角色'
                    this.dialogVisible = true;

                    this.formData.id = row.id;
                    this.formData.roleName = row.roleName;
                    this.formData.remark = row.remark;
                    this.formData.status = row.status;
                    this.formData.rules = row.rules!='' ? row.rules.split(",").map(v=>parseInt(v)) : [];

                    this.$nextTick(()=>{
                        this.$refs.menuListTree.setCheckedKeys(this.formData.rules);
                    })
                },
                save(){
                    const postData = {
                        id: this.formData.id,
                        remark: this.formData.remark,
                        status: this.formData.status,
                        rules: this.$refs.menuListTree.getCheckedKeys().join(','),
                    }
                    this.$refs.formRef.validate((valid) => {
                        if (valid) {
                            CURD.edit(postData)
                        }else{
                            return false;
                        }
                    });

                },
                query(){
                    CURD.query()
                },
                pageChanged(page){
                    this.pageInfo.page = page;
                    CURD.query()
                },
                handleCheck(data, tree){
                    console.log(tree);
                    const checkedNodes = tree.checkedNodes
                    checkedNodes.forEach((node) => {
                        // 获取父节点
                        const pid = node.pid;
                        // 如果父节点存在且未被勾选，则处理父节点.
                        if(pid>0 && !tree.checkedKeys.includes(pid)){
                            this.$refs.menuListTree.setChecked(pid, true);
                        }

                    })
                },
                hasPermission(path){
                    return HasAuth(path);
                }
            },
            mounted(){
                // 初始化增删改查组件
                CURD.init(this, Api.getRoleList, null, Api.editRole, null);
                CURD.query()
                // 初始化菜单列表
                Api.getMenuList().then(res=>{
                    this.menuList = res.data;
                })
            }
        });
        app.use(ElementPlus,{locale:zhCn}).mount('#app');
    </script>
</body>
</html>